<template>
  <el-container>
    <el-header style="padding: 0">
      <el-affix>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#7FFFD4"
            :router="false"
        >
          <el-menu-item style="margin: 0 40px;font-size:24px;letter-spacing: 8px;">人才管理系统</el-menu-item>
          <el-menu-item index="sy">首页</el-menu-item>
          <el-menu-item index="gnjs">功能介绍</el-menu-item>
          <el-menu-item index="gxfa">高效方案</el-menu-item>
          <el-menu-item index="cgal">成功案例</el-menu-item>
          <el-menu-item style="float:right;margin: 0 50px">
            <el-button
                type="primary"
                size="medium"
                icon="el-icon-user"
                round style=""
                v-on:click="$func.goPage('/usr/admin/grjj')">
              登录
            </el-button>
          </el-menu-item>
        </el-menu>
      </el-affix>
    </el-header>
    <el-main>
      <!--      banner滚动展示-->
      <el-carousel id="sy" :interval="5000" arrow="always">
        <el-carousel-item v-for="item in 4" :key="item" class="banner">
          <h3>这里可以放Banner图{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
      <el-container id="gnjs" style="padding-top: 50px;">
        <el-container style="background-color: #fff;">
          <el-header height="90px" style="line-height: 120px">
            <h3 style="font-size: 38px;font-weight: normal;">功能介绍</h3>
          </el-header>
          <el-main>
            <el-divider style="margin: 50px 0" content-position="left">
              <span style="font-size: 24px;font-weight: lighter">企业</span>
            </el-divider>
            <el-row :gutter="40">
              <el-col :span="4" :offset="3">
                <el-card class="function-card" :body-style="{ padding: '0px' }" shadow="never"
                         style=""
                >
                  <i class="iconfont icon-zuixing-71"
                     style="font-size: 80px"
                  ></i>
                  <div
                      style="padding: 14px;display: flex;justify-content: center;align-items: center;flex-direction: column">
                    <span>在线招聘</span>
                    <small style="margin: 10px 0;color:#ccc;">简单描述一下该栏功能<br>简单描述一下该栏功能</small>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="4" :offset="3">
                <el-card class="function-card" :body-style="{ padding: '0px' }" shadow="never"
                         style=""
                >
                  <i class="iconfont icon-zuixing-22"
                     style="font-size: 80px"
                  ></i>
                  <div
                      style="padding: 14px;display: flex;justify-content: center;align-items: center;flex-direction: column">
                    <span>员工档案</span>
                    <small style="margin: 10px 0;color:#ccc;">简单描述一下该栏功能<br>简单描述一下该栏功能</small>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="4" :offset="3">
                <el-card class="function-card" :body-style="{ padding: '0px' }" shadow="never"
                         style=""
                >
                  <i class="iconfont icon-yifashiwu"
                     style="font-size: 80px"
                  ></i>
                  <div
                      style="padding: 14px;display: flex;justify-content: center;align-items: center;flex-direction: column">
                    <span>信息透明</span>
                    <small style="margin: 10px 0;color:#ccc;">简单描述一下该栏功能<br>简单描述一下该栏功能</small>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-divider style="margin: 50px 0" content-position="left">
              <span style="margin-top:40px;font-size: 24px;font-weight: lighter">个人</span>
            </el-divider>
            <el-row :gutter="40" style="">
              <el-col :span="4" :offset="3">
                <el-card class="function-card" :body-style="{ padding: '0px' }" shadow="never"
                         style=""
                >
                  <i class="iconfont icon-idcard"
                     style="font-size: 80px"
                  ></i>
                  <div
                      style="padding: 14px;display: flex;justify-content: center;align-items: center;flex-direction: column">
                    <span>个人档案</span>
                    <small style="margin: 10px 0;color:#ccc;">简单描述一下该栏功能<br>简单描述一下该栏功能</small>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="4" :offset="3">
                <el-card class="function-card" :body-style="{ padding: '0px' }" shadow="never"
                         style=""
                >
                  <i class="iconfont icon-chrome"
                     style="font-size: 80px"
                  ></i>
                  <div
                      style="padding: 14px;display: flex;justify-content: center;align-items: center;flex-direction: column">
                    <span>线上应聘</span>
                    <small style="margin: 10px 0;color:#ccc;">简单描述一下该栏功能<br>简单描述一下该栏功能</small>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="4" :offset="3">
                <el-card class="function-card" :body-style="{ padding: '0px' }" shadow="never"
                         style=""
                >
                  <i class="iconfont icon-HTML"
                     style="font-size: 80px"
                  ></i>
                  <div
                      style="padding: 14px;display: flex;justify-content: center;align-items: center;flex-direction: column">
                    <span>项目展示</span>
                    <small style="margin: 10px 0;color:#ccc;">简单描述一下该栏功能<br>简单描述一下该栏功能</small>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
      <el-container id="gxfa">
        <el-container style="background-color: #fff;margin-top: 50px;padding-bottom: 50px">
          <el-header height="120px" style="line-height: 120px">
            <h3 style="font-size: 38px;font-weight: normal;">高效方案</h3>
          </el-header>
          <el-tabs active-name="tab01" class="tabs" tab-position="left" style="height: 200px;">
            <el-tab-pane label="用户分类" disabled></el-tab-pane>
            <el-tab-pane label="校/社招用户" name="tab01">
              平台可以提供什么就业方案
            </el-tab-pane>
            <el-tab-pane label="在职用户" name="tab02">
              平台可以提供相关工作帮助
            </el-tab-pane>
            <el-tab-pane label="企业用户" name="tab03">
              平台可以提供相关管理方案
            </el-tab-pane>
            <el-tab-pane label="离职用户" name="tab04">
              平台可以提供相关寻职建议
            </el-tab-pane>
          </el-tabs>
        </el-container>
      </el-container>
      <el-container id="cgal">
        <el-container style="background-color: #fff;margin-top: 50px;padding-bottom: 50px">
          <el-header height="120px" style="line-height: 120px">
            <h3 style="font-size: 38px;font-weight: normal;">成功案例</h3>
          </el-header>
          <el-carousel :interval="5000" height="220px" indicator-position="none">
            <el-carousel-item v-for="i in 4" :key="i">
              <el-row style="" :gutter="50">
                <el-col :span="6" v-for="o in 4" :key="o">
                  <el-card :body-style="{padding:'0px',position:'relative',height:'220px'}">
                    <img src="http://www.jingoal.com/refactor/static/images/case01.png" alt="" style="width: 100%">
                    <div class="card-title">案例</div>
                  </el-card>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </el-container>
      </el-container>
    </el-main>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </el-container>
</template>

<script>
import {ref} from "vue";

export default {
  name: "index",
  mounted() {
  },
  setup() {
    return {
      activeIndex: ref('sy'),
    }
  },
  data() {
    return {
      affixStatus: ''
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      if (key === 'sy') {
        window.scroll({behavior: 'smooth', top: 0})
      } else {
        document.getElementById(key).scrollIntoView({
          behavior: 'smooth'
        })
      }
    },
    ChangeAffixStatus(value) {
      this.affixStatus = value
    },
    getHeight(name) {
      return document.getElementById(name).getBoundingClientRect().top
    },
    handle() {
      const sy = this.getHeight('sy');
      const gnjs = this.getHeight('gnjs');
      const gxfa = this.getHeight('gxfa');
      const cgal = this.getHeight('cgal');
      let fin = 'sy';
      if (cgal < 200) {
        fin = 'cgal';
      } else if (gxfa < 200) {
        fin = 'gxfa';
      } else if (gnjs < 200) {
        fin = 'gnjs';
      } else if (sy < 200) {
        fin = 'sy';
      }
      this.activeIndex = fin;
    },
  },
  created() {
    window.addEventListener('scroll', this.handle, true)
  }
}
</script>

<style scoped>
/*导航栏CSS*/
.el-menu-item >>> i {
  color: #fff;
}

.el-menu-item:hover {
  background-color: rgb(84, 92, 100) !important;
}

/*banner CSS*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.banner.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.banner.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

/*功能介绍*/
.function-card >>> .el-card {
  border: none;
}

.function-card:hover i {
  color: #42b983;
}

/*高效方案*/
#tab-0 {
  /*font-size: 80px!important;*/
}

/*成功案例*/
.card-title {
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #fdfdfd;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  margin-top: -45px;
  /*padding: 10px 0;*/
  top: 100%;
}
</style>
